<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>个性暗音乐播放精简优化版</title>
    <link href="css/player.css" rel="stylesheet" type="text/css" />
</head>

<body>

        <div id="jp_container_N" class="jp-video jp-video-270p jp-state-playing" role="application"
            aria-label="media player">
            <div class="jp-type-playlist">

                <div id="jquery_jplayer_N" class="jp-jplayer"></div>
                <div class="jp-gui">

                    <div class="jp-music-title">歌名</div>
                    <div class="jp-video-play" style="display: none;">
                        <button class="jp-video-play-icon" role="button" tabindex="0">播放</button>
                    </div>
                    <div class="jp-interface">
                        <div class="jp-progress">
                            <div class="jp-seek-bar" style="width: 100%;">
                                <div class="jp-play-bar" style="overflow: hidden; width: 97.5219%;"></div>
                            </div>
                        </div>
                        <div class="jp-current-time" role="timer" aria-label="time">04:11</div>
                        <div class="jp-duration" role="timer" aria-label="duration">04:17</div>
                        <div class="jp-controls-holder">
                            <div class="jp-controls">
                                <button class="jp-previous" role="button" tabindex="0">上一曲</button>
                                <button class="jp-play" role="button" tabindex="0">播放</button>
                                <button class="jp-next" role="button" tabindex="0">下一曲</button>
                                <button class="jp-stop" role="button" tabindex="0">暂停</button>
                            </div>
                            <div class="jp-volume-controls">
                                <button class="jp-mute" role="button" tabindex="0">静音</button>
                                <button class="jp-volume-max" role="button" tabindex="0">最大音量</button>
                                <div class="jp-volume-bar">
                                    <div class="jp-volume-bar-value" style="width: 10%;"></div>
                                </div>
                            </div>
                            <div class="jp-toggles">
                                <button class="jp-repeat" role="button" tabindex="0">重复</button>
                                <button class="jp-shuffle" role="button" tabindex="0">随机</button>
                            </div>
                        </div>
                        <div class="jp-details" style="display: none;">
                            <div class="jp-title" aria-label="title">music</div>
                        </div>
                    </div>
                </div>
                <div class="jp-playlist">
                    <div class="jp-playlist-box">
                        <ul>
                        </ul>
                    </div>
                </div>
                <div class="jp-no-solution" style="display: none;">
                    <span style="transform: rotate(180deg);">升级需要</span>您浏览器赞不支持播放，请更新版本
                    <a href="http://get.adobe.com/flashplayer" target="_blank">Flash插件</a>.
                </div>
            </div>
            <div class="scrollBar" style="display: none;">
                <div class="bar"></div>
            </div>
            <button type="button" class="folded_bt" title="点击收缩" id="btnfold">
                <span style="transform: rotate(180deg);"></span>
            </button>

            <div id="listClose"></div>
        </div>

    <div id="app">
        <music></music>
        {{msg}}
    </div>
    <!-- <img src="https://imgessl.kugou.com/stdmusic/20210125/20210125185206971271.jpg" alt=""> -->
   <script>
       //  播放器初始化 
var musicList = [{
        title: "海伦",
        artist: "桥边姑娘",
        mp3: "https://mp32.9ku.com/upload/128/2019/12/18/1000452.mp3 ",
        poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/20191218/67d6edbe31b163b6.jpg"
    },
    {
        title: "王忻辰",
        artist: "清空",
        mp3: "https://mp32.9ku.com/upload/128/2021/01/26/1015576.mp3",
        poster: "https://imgessl.kugou.com/stdmusic/20210125/20210125185206971271.jpg"
    }, {
        title: "赵雷",
        artist: "成都",
        mp3: "https://mp32.9ku.com/upload/128/2016/11/07/855488.mp3",
        poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/20161107/c45e24dba7f2a9d8.jpg"
    },
    {
        title: "王琪",
        artist: "可可托海的牧羊人",
        mp3: "https://mp32.9ku.com/upload/128/2020/05/22/1004523.mp3",
        poster: "https://bkimg.cdn.bcebos.com/pic/72f082025aafa40f4bfb30fea62d144f78f0f736b3f5?x-bce-process.jpg"
    },
    {
        title: "朴树",
        artist: "平凡之路",
        mp3: "https://mp3.9ku.com/hot/2014/07-16/642431.mp3",
        poster: "http://img.9ku.com/pic/zjpic/15/141384.jpg"
    },
    {
        title: "凤凰传奇",
        artist: "自由飞翔",
        mp3: "https://mp3.9ku.com/hot/2007/05-07/84566.mp3",
        poster: "http://img.9ku.com/pic/zjpic/4/34746.jpg"
    },
    {
        title: "李玉刚",
        artist: "刚好遇见你",
        mp3: "https://mp32.9ku.com/upload/128/2016/11/14/855634.mp3",
        poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/20161114/1b33a084d1ad0af6.jpg"
    },
    {
        title: "凤凰传奇",
        artist: "荷塘月色",
        mp3: "https://mp3.9ku.com/hot/2010/06-19/361140.mp3",
        poster: "http://img.9ku.com/pic/zjpic/1/614.jpg"
    },
    {
        title: "凤凰传奇",
        artist: "最炫民族风",
        mp3: "https://mp3.9ku.com/hot/2009/05-31/183203.mp3",
        poster: "http://img.9ku.com/pic/zjpic/2/19748.jpg"
    },
    {
        title: "陈慧娴",
        artist: "千千厥歌",
        mp3: "https://mp3.9ku.com/hot/2004/07-17/42620.mp3",
        poster: "https://www.9ku.com/zjmusic/35104.htm"
    },
    {
        title: "周杰伦",
        artist: "青花瓷",
        mp3: "https://mp3.9ku.com/hot/2007/11-01/91161.mp3",
        poster: "http://img.9ku.com/pic/zjpic/4/32111.jpg"
    },
    {
        title: "大籽",
        artist: "白月光与朱砂痣",
        mp3: "https://mp32.9ku.com/upload/128/2021/01/04/1014430.mp3",
        poster: "https://bkimg.cdn.bcebos.com/pic/1c950a7b02087bf40ad1c5529198402c11dfa9ec617e"
    },
    {
        title: "毛不易",
        artist: "像我这样的人",
        mp3: "https://mp32.9ku.com/upload/128/2017/08/08/864424.mp3",
        poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/2021/02-08/1612775421.jpg"
    },
    {
        title: "周杰伦",
        artist: "东风破",
        mp3: "https://mp32.9ku.com/upload/128/2017/08/08/864424.mp3",
        poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/2021/02-08/1612762206.jpg"
    },
    {
        title: "阿冗",
        artist: "你的答案",
        mp3: "https://mp32.9ku.com/upload/128/2019/11/08/998378.mp3",
        poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/2021/03-15/1615806341.jpg"
    },
    {
        title: "买辣椒也用券",
        artist: "起风了",
        mp3: "https://mp32.9ku.com/upload/128/2018/02/09/875689.mp3",
        poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/20180209/0ec7990fdda432d9.png"
    },
    {
        title: "Beyond",
        artist: "光辉岁月",
        mp3: "https://mp3.9ku.com/new/2004/07-13/30001.mp3",
        poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/2021/02-06/1612555627.jpg"
    },
    {
        title: "Beyond",
        artist: "海阔天空",
        mp3: "https://mp3.9ku.com/new/2004/07-13/30001.mp3",
        poster: "http://aliyunimg.9ku.com/9kuimg/zhuanji/2021/02-11/1612984805.jpg"
    },
];
   </script>
    <script src="js/player/jquery.min.js"></script>
    <script src="js/player/player.js"></script>
    <script src="js/player/playlist.js"></script>
    <script src="js/player/player_database.js"></script>
    <script src="js/player/drag.js"></script>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="js/public.js"></script>
</body>

</html>